<script lang="ts" setup>
import AboutMain from "@/components/AboutMain.vue";
</script>
<template>
  <div class="common-layout">
    <el-container style="height: 100%">
      <el-header>
        <div>
          <h1>xxx管理系统</h1>
        </div>
      </el-header>
      <el-main>
        <AboutMain/>
      </el-main>
      <el-footer>
        <div>
          <h1>Footer</h1>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100%;

  & .el-main {
    padding: 0;

    & .el-col {
      padding: 0;
    }
  }

  & .el-header, .el-footer {
    width: 100%;
    padding: 0;
    border-bottom: 2px solid #ffffff;
    background: #545c64;

    & > div {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      & h1 {
        color: #ffffff;
      }
    }

  }

  & .el-footer {
    padding: 0;
    border-top: 2px solid #ffffff;
    background: #545c64;
    color: #fff;
  }
}
</style>
